<template>
  <!-- 平台用户管理 路由组件 -->
  <div class="platform-user">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>用户名</th>
            <th>昵称</th>
            <th>注册时间</th>
            <th>平台身份</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in userSlice" :key="user.userId">
            <td>{{ user.username }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.create_time | fmtDateTime }}</td>
            <td>{{ user.identity }}</td>
            <td>
              <a
                @click="banUser(user)"
                href="javascript:;"
                :class="user.state ? 'down' : ''"
                >{{ user.state ? "启用" : "冻结" }}</a
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页器 -->
    <div class="page-container">
      <span class="prev" :class="isPrev ? 'disabled' : ''" @click="prev"
        >上一页</span
      >
      <ul class="pages">
        <li
          class="page"
          v-for="(page, index) in pages"
          :key="`${page}-${index}`"
          :class="index + 1 === pageIdx ? 'active' : ''"
          @click="changePageIdx(index + 1)"
        >
          {{ page }}
        </li>
      </ul>
      <span class="next" :class="isNext ? 'disabled' : ''" @click="next"
        >下一页</span
      >
      <span class="total" style="margin-left: 0.3rem"
        >共{{ users.length }}条</span
      >
    </div>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "PlatformUser",
  data() {
    return {
      /* 用户数据 */
      users: [
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 1,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "超级管理员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test02",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "星级会员",
          state: 0,
        },
        {
          userId: nanoid(),
          username: "test03",
          name: "特邀用户",
          create_time: 16666666666,
          identity: "管理员",
          state: 0,
        },
      ],
      /* 每页的数据条数 */
      page_nums: 10,
      /* 当前页码 */
      pageIdx: 1,
    };
  },
  methods: {
    /* 禁用/启用用户 */
    banUser(user) {
      const find = this.users.find((x) => x.userId === user.userId);
      find["state"] = find["state"] ? 0 : 1;
    },
    /* 改变页码 */
    changePageIdx(pageIdx) {
      this.pageIdx = pageIdx;
    },
    /* 上一页 */
    prev() {
      if (this.pageIdx === 1) return;
      this.pageIdx--;
    },
    /* 下一页 */
    next() {
      if (this.pageIdx === this.pages) return;
      this.pageIdx++;
    },
  },
  computed: {
    /* 计算页码 */
    pages() {
      return Math.ceil(this.users.length / this.page_nums);
    },
    /* 计算能否上一页 */
    isPrev() {
      return this.pageIdx === 1;
    },
    /* 计算能否下一页 */
    isNext() {
      return this.pages === this.pageIdx;
    },
    /* 分割用户数据 */
    userSlice() {
      return this.users.slice((this.pageIdx - 1) * 10, 10 * this.pageIdx);
    },
  },
};
</script>

<style lang="less" scoped>
.platform-user {
  margin-top: 1rem;
  .table {
    height: 10rem;
    overflow: auto;
    table {
      border-collapse: collapse;
      letter-spacing: 1px;
      font-family: sans-serif;
      font-size: 0.3rem;
      height: 100%;
      box-sizing: border-box;
      td,
      th {
        border: 1px solid rgb(190, 190, 190);
        padding: 0.1rem 0.3rem;
        text-align: center;
      }
      tbody {
        td {
          font-size: 0.2rem;
          a {
            background-color: #f56c6c;
            padding: 00.05rem;
            border-radius: 000.05rem;
            color: #ffffff;
            &.down {
              background-color: #67c23a;
            }
          }
        }
        tr {
          &:hover {
            background-color: rgba(255, 255, 255, 0.204);
          }
        }
      }
    }
  }
  .page-container {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    .prev,
    .next,
    .page {
      background-color: rgb(104, 104, 104);
      padding: 0.1rem;
      cursor: pointer;
      border-radius: 00.05rem;
    }
    .prev,
    .next {
      &.disabled {
        background-color: rgba(104, 104, 104, 0.579);
        cursor: no-drop;
      }
    }
    .pages {
      display: flex;
      .page {
        margin-left: 0.05rem;
        width: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        &.active {
          background-color: #67c23a;
        }
        &:last-child {
          margin-right: 0.05rem;
        }
      }
    }
  }
}
</style>